Project Details
Scope: Web Design, Web Development
Tools Used: Figma, Adobe Illustrator, HTML, CSS, JavaScript
Timeline: 1 Week
To add some dynamism to our HTML page, we can add some animations, especially on icons. Working with SVG, we enjoy good vrowser support for SVG animation, and we have more ways to create new animation without losing image quality. This is especially helpful when designers/developers are creating responsive websites that must look good and work well across a wide range of screen sizes and devices.
Pattern Design
Unlike raster images, which delivers the final copy of an image, SVG images are completely editable by adjusting the codes using a text editor or special drawing tools. We can style or animate SVG images using class names or IDs of the SVG elements.
SVG Line Drawing
SVG supports the ability to change vector graphics over time, to create animated effects. stroke-dasharray is a SVG presentation attribute (which we can use as a CSS property) to make our SVG paths dashed instead of solid. we can also offset the stroke position with stroke-dashoffset. If we change this property it looks like our dashes are moving along the path.